import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { List, Icon, ActivityIndicator, Modal } from 'antd-mobile';
import { ToastTips } from '../../../../../common/toastTips/tosat';
import content from '../../../common/contentCss/content.css';
import CustTitle from '../../../common/title/title';
import MyPartTimeList from './pages/myPartTimeList/myPartTimeList';
import TabsNav from './pages/tabs/tabsNav';
import styles from './common.css';
import SingInInput from '../../../../../common/popupsRow/PopupsRow';
import DeleteBtnAlert from '../../../../../common/alert/deleteBtnAlert/deleteBtnAlert';

const prompt = Modal.prompt;
const alert = Modal.alert;

function MyPartTime({dispatch,loading,myPartTime}) {

  const { selectedIndex,list,pageNum,pages,callCustomerStatus,customerPhone } = myPartTime;

  // console.log('list', JSON.stringify(list));

  //控制弹出商家号码拨号
  if(callCustomerStatus){
    document.getElementById("call-customer").click();
    dispatch({
      type:'myPartTime/querySuccess',
      payload:{
        callCustomerStatus:false,
        customerPhone:''
      }
    })
  }

  const titleProps = {
    titleName:'我的兼职',
    goBack(){
      dispatch(routerRedux.goBack());
    },
  }

  const tabsNavProps = {
    selectedIndex,
    onSelected(selectedIndex){
      console.log(selectedIndex);
      dispatch({
        type:'myPartTime/querySuccess',
        payload:{
          selectedIndex,
          pageNum:1
        }
      })
      dispatch({
        type:'myPartTime/query',
        payload:{
        }
      })
    }
  }

  const myPartTimeListProps ={
    loading,
    list,
    onViewMember(id){
      dispatch(routerRedux.push({
        pathname: '/part-time-detail',
        query: {
          id,
        }
      }));
    },
    onPagination() {

      if (loading || JSON.stringify(list) == "[]") {
        return;
      }
      if (parseInt(pageNum) >= parseInt(pages)) {
        return;
      }
      dispatch({
        type: 'members/query',
        payload: {
          pageNum: pageNum + 1,
        }
      })
    },
    showLimit(id){
      dispatch(routerRedux.push({
        pathname: '/part-time-detail',
        query: {
          id,
        }
      }));
    },
    onCancel(data){
      console.log('取消报名', JSON.stringify(data));
    },
    sellerPhone(data){
      // console.log('联系商家', JSON.stringify(data));
      callCustomer(data.job.phone);
    },
    complaintPost(data){
      console.log('投诉职位', JSON.stringify(data));
    },
    signIn(data){
      // console.log('签到', JSON.stringify(data));
      showSignInAlert(data.id)
    },
    remind(data){
      // console.log('提醒结算', JSON.stringify(data));
      showValidRemind(data)
    },
    appraise(data){
      // console.log('评价', JSON.stringify(data));
      assessPartTime(data)
    },
  }

  //签到码
  const showSignInAlert =(applicationId)=>{
    prompt('请输入签到码', '',
      [
        { text: '取消' },
        {
          text: '提交',
          onPress: signCode => new Promise((resolve) => {
            // setTimeout(() => {
              // resolve();
            //   console.log(`value:${value}`);
            // }, 600);
            const re = /^[1-9]+[0-9]*]*$/;//判断正整数
            console.log(re.test(signCode));
            if(!re.test(signCode)){
              ToastTips('请输入正确的签到码', 2000, null);
            }else{
              resolve();
              dispatch({
                type:'myPartTime/signIn',
                payload:{
                  applicationId,
                  signCode
                }
              })
            }

          }),
        },
      ], 'default', null, ['请输入'])
  }

  //提醒结算--确认窗口
  const showValidRemind = (data) => {
    let isValidRemindAlert;
    const isValidRemindProps={
      tipsContent:'确定要提醒结算吗？',
      okClick(){
        console.log('ok');
        validRemind(data);
        isValidRemindAlert.close();
      },
      cancelClick(){
        isValidRemindAlert.close();
      },
    }
    return (
      isValidRemindAlert = alert('', <DeleteBtnAlert {...isValidRemindProps}/>, [])
    )
  }
  //提醒结算
  const validRemind = (data) => {
    if(data.reminded == 0){
      dispatch({
        type:'myPartTime/remindingAndClearing',
        payload:{
          applicationId:data.id
        }
      })
    }else if(data.reminded == 1){
      ToastTips('您已提醒平台结算，请耐心等待。如有问题，请联系平台', 2000, null);
    }
  }

  //联系商家
  const callCustomer = (phoneNumber) => {
    if(phoneNumber){
      dispatch({
        type:'myPartTime/querySuccess',
        payload:{
          callCustomerStatus:true,
          customerPhone:phoneNumber,
        }
      })
    }
  }

  //评价兼职
  const assessPartTime = (data) => {

    // console.log('评价', JSON.stringify(data));
    dispatch(routerRedux.push({
      pathname: '/comment-part-time',
      query: {
        id:data.id,
      }
    }));
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F5F5F9'}}></div>;

  return(
    <div className={content.content}>
      <CustTitle {...titleProps}/>
      <div style={{
        marginTop: '2.8125em',
      }}>
      </div>
     <div className={styles.tabs}>
        <TabsNav {...tabsNavProps}/>
      </div>
      <div className={styles.itemList}>
        <MyPartTimeList {...myPartTimeListProps}/>
      </div>
      <ActivityIndicator
        toast
        text=""
        animating={loading}
      />
      {customerPhone ? (
        <a href={`tel:${customerPhone}`} id="call-customer"/>
      ):(
        <span id="call-customer"></span>
      )}
    </div>
  )
}

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    myPartTime:state.myPartTime,
  }
}

export default connect(mapStateToProps)(MyPartTime);
